<html>
    <head>
        <title>Itowns - WFS (geojson) example</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="description">
            <p>Key bindings</p>
            <ul>
              <li>Left-Click: camera translation (drag)</li>
              <li>Right-Click: camera translation (pan)</li>
              <li>Ctrl + Left-Click: camera rotation (orbit)</li>
              <li>Spacebar / Wheel-Click: smart zoom</li>
              <li>Mouse Wheel: zoom in/out</li>
              <li>T: orient camera to a top view</li>
              <li>Y: move camera to start position</li>
            </ul>
            <br />
            <p><b>Information Batiment</b></p>
            <ul id="info"></ul>
        </div>
        <div id="viewerDiv"></div>
        <script src="../dist/itowns.js"></script>
        <script src="js/GUI/LoadingScreen.js"></script>
        <script type="text/javascript">
            // Define projection that we will use (taken from https://epsg.io/3946, Proj4js section)
            itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
            /* global itowns,document, setupLoadingScreen, window */

            var extent;
            var viewerDiv;
            var view;
            var meshes;
            var p;
            var wmsImagerySource;
            var wmsImageryLayer;
            var rgb;
            var lyonTclBusSource;
            var color = new itowns.THREE.Color();

            // Define geographic extent: CRS, min/max X, min/max Y
            extent = new itowns.Extent(
                'EPSG:3946',
                1837816.94334, 1847692.32501,
                5170036.4587, 5178412.82698);

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            viewerDiv = document.getElementById('viewerDiv');

            // Instanciate PlanarView*
            view = new itowns.PlanarView(viewerDiv, extent, { disableSkirt: true,
                placement: {
                    coord: new itowns.Coordinates('EPSG:3946', 1840839, 5172718, 0),
                    heading: -45,
                    range: 1800,
                    tilt: 30,
                }
            });
            setupLoadingScreen(viewerDiv, view);

            wmsImagerySource = new itowns.WMSSource({
                url: 'https://download.data.grandlyon.com/wms/grandlyon',
                networkOptions: { crossOrigin: 'anonymous' },
                version: '1.3.0',
                name: 'Ortho2009_vue_ensemble_16cm_CC46',
                projection: 'EPSG:3946',
                extent: extent,
                format: 'image/jpeg',
            });

            // Add a WMS imagery layer
            wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
                transparent: false,
                source: wmsImagerySource,
            });

            view.addLayer(wmsImageryLayer);
            // eslint-disable-next-line no-new
            new itowns.PlanarControls(view, {});

            function setMaterialLineWidth(result) {
                result.traverse(function _setLineWidth(mesh) {
                    if (mesh.material) {
                        mesh.material.linewidth = 5;
                    }
                });
            }

            function colorLine(properties) {
                if (properties) {
                    rgb = properties.couleur.split(' ');
                    return color.setRGB(rgb[0] / 255, rgb[1] / 255, rgb[2] / 255);
                }
                return color.setRGB(1, 1, 1);
            }

            lyonTclBusSource = new itowns.WFSSource({
                url: 'https://download.data.grandlyon.com/wfs/rdata?',
                protocol: 'wfs',
                version: '2.0.0',
                id: 'tcl_bus',
                typeName: 'tcl_sytral.tcllignebus',
                projection: 'EPSG:3946',
                extent: {
                    west: 1822174.60,
                    east: 1868247.07,
                    south: 5138876.75,
                    north: 5205890.19,
                },
                zoom: { min: 2, max: 2 },
                format: 'geojson',
            });

            var lyonTclBusLayer = new itowns.GeometryLayer('lyon_tcl_bus', new itowns.THREE.Group(), {
                update: itowns.FeatureProcessing.update,
                convert: itowns.Feature2Mesh.convert({
                    color: colorLine }),
                onMeshCreated: setMaterialLineWidth,
                source: lyonTclBusSource,
            });

            view.addLayer(lyonTclBusLayer);

            function colorBuildings(properties) {
                if (properties.id.indexOf('bati_remarquable') === 0) {
                    return color.set(0x5555ff);
                }
                if (properties.id.indexOf('bati_industriel') === 0) {
                    return color.set(0xff5555);
                }
                return color.set(0xeeeeee);
            }

            function extrudeBuildings(properties) {
                return properties.hauteur;
            }

            meshes = [];
            function scaler(/* dt */) {
                var i;
                var mesh;
                if (meshes.length) {
                    view.notifyChange();
                }
                for (i = 0; i < meshes.length; i++) {
                    mesh = meshes[i];
                    mesh.scale.z = Math.min(
                        1.0, mesh.scale.z + 0.1);
                    mesh.updateMatrixWorld(true);
                }
                meshes = meshes.filter(function filter(m) { return m.scale.z < 1; });
            }

            function acceptFeature(properties) {
                return !!properties.hauteur;
            }

            view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, scaler);

            var wfsBuildingSource = new itowns.WFSSource({
                url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
                version: '2.0.0',
                typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
                projection: 'EPSG:4326',
                ipr: 'IGN',
                format: 'application/json',
                zoom: { min: 4, max: 4 },
                extent: {
                    west: 4.568,
                    east: 5.18,
                    south: 45.437,
                    north: 46.03,
                },
            });

            var wfsBuildingLayer = new itowns.GeometryLayer('wfsBuilding', new itowns.THREE.Group(), {
                update: itowns.FeatureProcessing.update,
                convert: itowns.Feature2Mesh.convert({
                    color: colorBuildings,
                    batchId: function (property, featureId) { return featureId; },
                    extrude: extrudeBuildings }),
                onMeshCreated: function scaleZ(mesh) {
                    mesh.scale.z = 0.01;
                    meshes.push(mesh);
                },
                filter: acceptFeature,
                overrideAltitudeInToZero: true,
                projection: 'EPSG:3946',
                source: wfsBuildingSource,
            });

            view.addLayer(wfsBuildingLayer);

            function picking(event) {
                var htmlInfo = document.getElementById('info');
                var intersects = view.pickObjectsAt(event, 2, 'wfsBuilding');
                var properties;
                var info;
                var batchId;
                htmlInfo.innerHTML = ' ';

                if (intersects.length) {
                    batchId = intersects[0].object.geometry.attributes.batchId.array[intersects[0].face.a];
                    properties = intersects[0].object.feature.geometry[batchId].properties;
                    Object.keys(properties).map(function (objectKey) {
                        var value = properties[objectKey];
                        var key = objectKey.toString();
                        if (key[0] !== '_' && key !== 'geometry_name') {
                            info = value.toString();
                            htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
                        }
                    });
                    return properties;
                }
            }

            window.addEventListener('mousemove', picking, false);
        </script>
    </body>
</html>
